<template>
  <div>
    <div class="row-header">
      <el-form :model="form" ref="form" label-width="50px" :inline="true">
        <el-form-item label=" " prop="oldCardNumber">
          <el-input placeholder="请输入旧业务号码" size="small" v-model.trim="form.oldCardNumber" style="width: 220px;"></el-input>
        </el-form-item>
        <el-form-item label=" " prop="newCardNumber">
          <el-input placeholder="请输入新业务号码" size="small" v-model.trim="form.newCardNumber" style="width: 220px;"></el-input>
        </el-form-item>
        <el-form-item label=" " prop="dictChangeStatus">
          <el-select v-model="form.dictChangeStatus" placeholder="请选择换卡状态" style="width: 220px;" >
            <el-option v-for="dictChannelCardStatus in dictChannelCardStatusSelect"
                       :key="dictChannelCardStatus.value" :label="dictChannelCardStatus.label"
                       :value="dictChannelCardStatus.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=" " prop="dictChangeType">
          <el-select v-model="form.dictChangeType" placeholder="请选择换卡类型" style="width: 220px;">
            <el-option v-for="dictChannelCardType in dictChannelCardTypeSelect" :key="dictChannelCardType.value" :label="dictChannelCardType.label" :value="dictChannelCardType.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=" " prop="customerName">
          <el-input size="small" v-model="form.customerName" placeholder="请输入收件人名称" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label=" " prop="customerMobile">
          <el-input size="small" v-model="form.customerMobile" placeholder="请输入收件人电话" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label=" " prop="insertTime">
          <el-date-picker class="select" v-model="form.insertTime" type="daterange" unlink-panels
                          range-separator="至" start-placeholder="插入开始日期" end-placeholder="插入结束日期" size="small"
                          value-format=" yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label=" " prop="updateTime">
          <el-date-picker class="select" v-model="form.updateTime" type="daterange" unlink-panels
                          range-separator="至" start-placeholder="换卡完成开始日期" end-placeholder="换卡完成结束日期"
                          value-format=" yyyy-MM-dd" format="yyyy-MM-dd" ></el-date-picker>
        </el-form-item>
      </el-form>
      <div class="row-form-btn">
        <el-button type="shenda" size="small" @click="changeCard" icon="el-icon-search">查询</el-button>
        <el-button type="shenda" size="small" @click="resetForm('form')" icon="el-icon-refresh-right">重置</el-button>
        <el-button type="shenda" size="small" @click="exportExcel" :loading="loading" icon="el-icon-bottom">导出</el-button>
      </div>
    </div>
    <div class="split-line"></div>
    <div class="row-main">
      <el-button  size="small" @click="showDialog" v-has="'notCardStop'" v-preventReClick>批量拆机</el-button>
      <el-button  size="small" @click="toLogisticsInfo">查看物流详情</el-button>
      <el-button  size="small" @click="changeFlow" v-preventReClick icon="el-icon-sort">手动转流</el-button>
      <el-table v-has="'cardListOemListTable'" :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }" :data="tableData"
                ref="table" tooltip-effect="dark" class="row-main-table" @selection-change="handleSelectionChange"
                @sort-change="changeSort" v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)"
                :row-key="getRowKeys">
        <el-table-column type="selection" :reserve-selection="true" align="center"></el-table-column>
        <el-table-column sortable="custom" prop="oldCardNumber" label="旧业务号码" align="center"></el-table-column>
        <el-table-column sortable="custom" prop="oldCardIccid" label="旧ICCID" align="center"></el-table-column>
        <el-table-column prop="insertEmpName" label="换卡操作人" align="center"></el-table-column>
        <el-table-column sortable="custom" prop="insertTime" label="操作时间" align="center"></el-table-column>
        <el-table-column prop="courierNumber" label="运单号" align="center">
          <template slot-scope="scope">
            <div style="color:blue;text-decoration:underline;cursor:pointer;" @click="showNumDetailBtn(scope.row)">{{
                scope.row.courierNumber }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="customerName" label="收件人姓名" align="center"></el-table-column>
        <el-table-column prop="customerMobile" label="客户电话" align="center"></el-table-column>
        <el-table-column prop="shippingAddress" label="收货地址" align="center"></el-table-column>
        <el-table-column prop="newCardNumber" label="新业务号码" align="center"></el-table-column>
        <el-table-column prop="newCardIccid" label="新卡ICCID" align="center"></el-table-column>
        <el-table-column prop="dictChangeTypeName" label="换卡类型" align="center"></el-table-column>
        <el-table-column prop="dictChangeStatusName" label="换卡状态" align="center"></el-table-column>
        <el-table-column prop="remark" label="备注" align="center">
          <template slot-scope="scope">
            <el-popover
              placement="left"
              title="备注"
              width="260"
              trigger="hover"
              v-if="scope.row.remark"
              :content="scope.row.remark">
              <span class="hiddenText" slot="reference">{{scope.row.remark}}</span>
            </el-popover>
            <span v-else>--</span>
          </template>

        </el-table-column>
        <el-table-column prop="updateTimeDate" label="最终完成时间" align="center"></el-table-column>
        <el-table-column prop="cardCount" label="操作" align="center">
          <template slot-scope="scope">
            <el-dropdown trigger="click">
              <div>
                <svg-icon class="el-dropdown-link" icon-class="operation"></svg-icon>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-button class="operation" style="width: 100%;" v-preventReClick
                           @click="showSendGoodsBtn(scope.row)"
                           :disabled="scope.row.dictChangeStatus === 'WAIT_CONFIRM'|| scope.row.dictChangeStatus === 'WAIT_CHANGE'|| scope.row.dictChangeStatus === 'WAIT_TRANSFORM'|| scope.row.dictChangeStatus === 'CHANGE_SUCCESS'|| scope.row.dictChangeStatus === 'BE_REMOVED'">
                  发货
                </el-button>
                <el-button class="operation" style="width: 100%;" v-preventReClick
                           @click="showterminatedBtn(scope.row)"
                           :disabled="scope.row.dictChangeStatus === 'WAIT_CONFIRM'|| scope.row.dictChangeStatus === 'WAIT_CHANGE'|| scope.row.dictChangeStatus === 'WAIT_TRANSFORM'|| scope.row.dictChangeStatus === 'WAIT_SEND'|| scope.row.dictChangeStatus === 'BE_REMOVED'">
                  拆机
                </el-button>
                <el-button class="operation" style="width: 100%;" v-preventReClick
                           @click="deleteRowRecord(scope.row)"
                          >
                  删除
                </el-button>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="currentPage" :page-size="pageSize" class="row-main-pager"
                     layout="total, sizes, prev, pager, next, jumper" :page-count="maxPage" :total="totalPage"
                     :page-sizes="[10,20,50,100]" background></el-pagination>
    </div>

    <el-dialog class="delete" top="30vh" :visible.sync="showNumDetail" :append-to-body="true" width="30%">
      <el-form class="demo-ruleForm" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="收货人姓名">
          <el-input v-model="ruleForm.customerName" size="small" :readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="客户收货地址">
          <el-input type="textarea" :rows="1" :readonly="true" v-model="ruleForm.shippingAddress"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item label="客户电话">
          <el-input v-model="ruleForm.customerMobile" size="small" :readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="运单号" prop="courierNumber1" ref="input">
          <el-input v-model="courierNumber1" size="small" :readonly="true"></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" slot="footer">
      <el-button @click="showNumDetail = false" size="small">关 闭</el-button></span>
    </el-dialog>

    <el-dialog class="delete" top="30vh" :visible.sync="showSendGoods" :append-to-body="true" width="30%">
      <el-form class="demo-ruleForm" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="收货人姓名">
          <el-input v-model="ruleForm.customerName" size="small" :readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="客户收货地址">
          <el-input type="textarea" :rows="1" :readonly="true" v-model="ruleForm.shippingAddress"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item label="客户电话">
          <el-input v-model="ruleForm.customerMobile" size="small" :readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="运单号" prop="courierNumber" ref="input">
          <el-input v-model="ruleForm.courierNumber" size="small" v-focus></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" slot="footer">
      <el-button @click="showSendGoods = false" size="small">取 消</el-button>
      <el-button type="primary" @click="changeCardDialogbl('ruleForm')" size="small">确 定</el-button></span>
    </el-dialog>
    <!--  手动转流  -->
    <el-dialog class="delete" top="30vh" :visible.sync="changeFlowDialog" :append-to-body="true" :width="$store.state.app.screenWidth<600?'100%':'500px'">
      <el-form class="demo-ruleForm" :model="ruleForm" label-width="100px">
        <el-form-item label="旧业务号码">
          <el-input v-model.trim="changeFlowForm.oldCardNumber"
                    @blur="checkChangeCardNumber1(changeFlowForm.oldCardNumber)" size="small"></el-input>
          <div :style="{'width': '100px','display':$store.state.app.screenWidth<600?'block':'inline-block','margin':$store.state.app.screenWidth<600?'10px 110px':'0 10px'}" v-if="changeFlowForm.oldLabel!=''">{{changeFlowForm.oldLabel}}</div>
        </el-form-item>

        <el-form-item label="新业务号码" ref="input">
          <el-input v-model.trim="changeFlowForm.cardNumber"
                    @blur="checkChangeCardNumber2(changeFlowForm.cardNumber)" size="small" v-focus></el-input>
          <div :style="{'width': '100px','display':$store.state.app.screenWidth<500?'block':'inline-block','margin':$store.state.app.screenWidth<600?'10px 110px':'0 10px'}" v-if="changeFlowForm.newLabel!=''">{{changeFlowForm.newLabel}}</div>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" slot="footer">
      <el-button @click="changeFlowDialog = false" size="small">取 消</el-button>
      <el-button type="primary" @click="confirmFlow" size="small" v-preventReClick>确 定</el-button></span>
    </el-dialog>
    <el-dialog
      class="delete"
      top="33vh"
      :visible.sync="changeCardDialog"
      :append-to-body="true"
      width="30%">
      <span style="display: flex; justify-content: center;">确定发货吗？</span>
      <span class="dialog-footer" slot="footer">
        <el-button @click="changeCardDialog = false" size="small">取 消</el-button>
        <el-button type="primary" @click="sendCard()" size="small" v-preventReClick>确 定</el-button>
      </span>
    </el-dialog>

    <!-- 批量拆机确认-->
    <el-dialog class="delete" top="33vh" :visible.sync="showStopCard" :append-to-body="true" width="30%"><span
      style="display: flex; justify-content: center;">拆机操作前请确认是否在线下通过运营商完成拆机，如未完成，请与运营商联系拆机！</span>
      <el-form class="demo-ruleForm" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px"
               style="margin-top:10px;">
        <el-form-item label="拆机原因" prop="reason">
          <el-input type="textarea" :rows="1" v-model="ruleForm.reason" size="small" v-focus></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" slot="footer">
      <el-button @click="showStopCard = false" size="small">取 消</el-button>
      <el-button type="primary" @click="stopCardBtn('ruleForm')" size="small" v-preventReClick>确 定</el-button></span>
    </el-dialog>
    <el-dialog class="delete" top="33vh" :visible.sync="terminatedDialog" :append-to-body="true" width="30%"><span
      style="display: flex; justify-content: center;">确定拆机吗？</span><span class="dialog-footer" slot="footer">
      <el-button @click="terminatedDialog = false" size="small">取 消</el-button>
      <el-button type="primary" @click="stopCardBtnsubmit" size="small" v-preventReClick>确 定</el-button></span>
    </el-dialog>
    <el-dialog class="delete" top="33vh" :visible.sync="showStopCard1" :append-to-body="true" width="30%"><span
      style="display: flex; justify-content: center;">拆机操作前请确认是否在线下通过运营商完成拆机，如未完成，请与运营商联系拆机！</span>
      <el-form class="demo-ruleForm" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px"
               style="margin-top:10px;">
        <el-form-item label="拆机原因" prop="reason">
          <el-input type="textarea" :rows="1" v-model="ruleForm.reason" size="small" v-focus></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" slot="footer">
      <el-button @click="showStopCard1 = false" size="small">取 消</el-button>
      <el-button type="primary" @click="stopCardBtn1('ruleForm')" size="small" v-preventReClick>确 定</el-button></span>
    </el-dialog>
    <el-dialog class="delete" top="33vh" :visible.sync="terminatedDialog1" :append-to-body="true" width="30%"><span
      style="display: flex; justify-content: center;">确定拆机吗？</span><span class="dialog-footer" slot="footer">
      <el-button @click="terminatedDialog1 = false" size="small">取 消</el-button>
      <el-button type="primary" @click="stopCardBtnsubmit1()" size="small" v-preventReClick>确 定</el-button></span>
    </el-dialog>
    <el-dialog class="delete" top="33vh" :visible.sync="changeFlowConfirm" :append-to-body="true" width="30%"><span
      style="display: flex; justify-content: center;">确定手动转流量吗？</span><span class="dialog-footer" slot="footer">
      <el-button @click="changeFlowConfirm = false" size="small">取 消</el-button>
      <el-button type="primary" @click="changeCardFlow()" size="small" v-preventReClick>确 定</el-button></span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    changeCard,
    sendCard,
    terminated,
    changeCardFlow,
    getOemIdForBackDoor,
    checkChangeCardNumber,
    downloadChangCardList,
    removeChangeCard
  } from '@/api/getData'

  export default {
    directives: {
      focus: {
        inserted: function (el) {
          el.querySelector('input').focus()
        }
      }
    },
    name: 'List',
    data() {
      return {
        totalPage: 0,
        maxPage: 1,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        ruleForm: {
          courierNumber: '',
          shippingAddress: '',
          customerMobile: '',
          reason: '',
        },
        changeFlowForm: {
          oldCardNumber: '',
          cardNumber: '',
          oldLabel: '',
          newLabel: ""

        },
        form: {
          oldCardNumber: '',
          newCardNumber: '',
          dictChangeType: '',
          dictChangeStatus: '',
          insertTime: '',
          updateTime: '',
          customerMobile: '',
          customerName: '',
        },
        courierNumber1: '',
        id: '',
        terminatedDialog: false,
        terminatedDialog1: false,
        //后门
        isSHENDA: false,
        textarea: '',
        tableData: [],
        tableData1: [],
        pageSize: 10,
        currentPage: 1,
        ascs: [],
        descs: [],
        dictChannelCardTypeSearch: '',
        showSendGoods: false,
        changeCardDialog: false,
        showNumDetail: false,
        changeFlowDialog: false,
        changeFlowConfirm: false,
        showBatchStopCard: "确认批量设置停机吗？",
        tableChecked: [],
        showStopCard: false,
        showStopCard1: false,
        loading: false,
        ids: [],
        dictChannelCardStatusSelect: [
          {
            value: '',
            label: '请选择卡状态'
          },
          {
            value: 'WAIT_CONFIRM',
            label: '待客户确认'
          },
          {
            value: 'WAIT_SEND',
            label: '待发货'
          },
          {
            value: 'WAIT_CHANGE',
            label: '待换卡'
          },
          {
            value: 'WAIT_TRANSFORM',
            label: '待转流'
          },
          {
            value: 'CHANGE_SUCCESS',
            label: '换卡成功'
          },
          {
            value: 'BE_REMOVED',
            label: '已拆机'
          }
        ],
        dictChannelCardTypeSelect: [
          {
            value: '',
            label: '请选择卡类型'
          },
          {
            value: 'INITIATIVE',
            label: '主动换卡'
          },
          {
            value: 'PASSIVE',
            label: '被动换卡'
          }
        ],
        submitFlag1: true,
        submitFlag2: true,
        rules: {
          courierNumber: [
            {required: true, message: '请填写运单号', trigger: 'blur'},
            {min: 1, max: 20, message: '长度不能超过20位', trigger: 'blur'}
          ],
          reason: [
            {required: true, message: '请填写拆机原因', trigger: 'blur'},
            {min: 1, max: 20, message: '长度不能超过20位', trigger: 'blur'}
          ],
        },
        pagekey: '',
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      }
    },
    mounted() {
      this.changeCard()
      this.getOemIdForBackDoor()
    },
    methods: {
      toLogisticsInfo() {
        this.$router.push('/card/logistics-list')
      },
      async confirmFlow() {
        this.changeFlowConfirm = true;
        this.pagekey = await this.$getPageKey();
      },
      async getOemIdForBackDoor() {
        const returnData = await getOemIdForBackDoor({})
        if (returnData._result) {
          this.isSHENDA = true
        }
      },
      async changeCardFlow() {
        if (this.submitFlag1 && this.submitFlag2) {
          const returnData = await changeCardFlow({
              operatorNumber: this.changeFlowForm.oldCardNumber,
              newOperatorNumber: this.changeFlowForm.cardNumber
            },
            {pagekey: this.pagekey}
          )
          if (returnData._result) {
            this.$message({message: '操作成功', type: 'success'})
            this.changeFlowDialog = false;
            this.changeFlowConfirm = false;
            this.changeCard()
          }
        } else {
          this.$message({message: '您的新卡或者是旧卡不存在，请重新输入', type: 'error'})
        }
        this.pagekey = await this.$getPageKey();
      },
      changeFlow() {
        this.changeFlowDialog = true
      },
      getRowKeys(row) {
        return row.id
      },
      handleSelectionChange(val) {
        this.tableChecked = val
        const length = this.tableChecked.length
        //console.log(`共 ${length} 条`)
      },
      handleSizeChange(val) {
        //console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.changeCard()
      },
      handleCurrentChange(val) {
        //console.log(`当前页: ${val}`)
        this.currentPage = val
        this.changeCard()
      },
      deleteRowRecord(val){
        this.$confirm('确定要删除么?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //removeChangeCard
          removeChangeCard({
            id:val.id
          }).then(v=>{
            this.$message.success("操作成功!")
          })
        }).catch(() => {

        });
      },
      changeSort(column) {
        //console.log(column);
        if (column.order == 'ascending') {
          this.descs = []
          this.ascs = [column.prop];
        } else {
          this.ascs = []
          this.descs = [column.prop];
        }
        this.changeCard();
      },
      async showDialog() {
        this.pagekey = await this.$getPageKey();
        if (this.tableChecked.length !== 0) {
          if (this.tableChecked.every(item => {
            return item.dictChangeStatus !== 'CHANGE_SUCCESS'
          })) {
            this.$message({message: '只有换卡成功的卡可以设置批量拆机', type: 'error'})
          } else {
            this.showStopCard = true
          }
        } else {
          this.$message({message: '请选择要操作的卡组', type: 'error'})
        }
      },
      //批量拆机
      async stopCardBtnsubmit() {
        let arrays = this.tableChecked.filter(item => item.dictChangeStatus === 'CHANGE_SUCCESS').map(item => {
          const obj = {}
          obj.id = item.id
          obj.oldCardId = item.oldCardId
          obj.reason = this.ruleForm.reason
          return obj
        })
        const returnData = await terminated(
          arrays, {pagekey: this.pagekey}
        )
        if (returnData._result) {
          this.$message({message: '批量拆机成功', type: 'success'})
          this.showStopCard = false
          this.terminatedDialog = false
          this.changeCard()
        }
        this.pagekey = await this.$getPageKey();
      },
      async stopCardBtnsubmit1() {
        const returnData = await terminated(
          [{
            id: this.id,
            oldCardId: this.oldCardId,
            reason: this.ruleForm.reason
          }]
        )
        if (returnData._result) {
          this.$message({message: '拆机成功', type: 'success'})
          this.showStopCard1 = false
          this.terminatedDialog1 = false
          this.changeCard()
        }
      },
      //换卡列表
      async changeCard() {
        // this.currentPage = 0;
        let startTime = null;
        let endTime = null;
        this.tableLoading = true;
        if (this.form.insertTime !== '' && this.form.insertTime != null) {
          startTime = this.form.insertTime[0];
          endTime = this.form.insertTime[1];
        }
        let handleStartTime = null
        let handleEndTime = null
        if (this.form.updateTime !== '' && this.form.updateTime != null) {
          handleStartTime = this.form.updateTime[0];
          handleEndTime = this.form.updateTime[1];
        }
        const returnData = await changeCard({
            oldCardNumber: this.form.oldCardNumber,
            newCardNumber: this.form.newCardNumber,
            dictChangeStatus: this.form.dictChangeStatus,
            dictChangeType: this.form.dictChangeType,
            customerMobile: this.form.customerMobile,
            customerName: this.form.customerName,
            insertTimeStart: startTime,

            updateTimeStart: handleStartTime,
            updateTimeEnd: handleEndTime,
            page: {
              current: this.currentPage + '',
              size: this.pageSize + '',
              ascs: this.ascs,
              descs: this.descs
            }
          },
          {
            obj: this,
            key: 'tableLoading'
          })
        this.tableData = []
        if (returnData._result) {
          this.maxPage = Math.ceil(returnData.data.total / this.pageSize) // 分页的最大页数
          this.totalPage = returnData.data.total;
          // 数据回显
          returnData.data.records.map(item => {
            const obj = {}
            obj.id = item.id
            obj.oldCardId = item.oldCardId
            obj.oldCardNumber = item.oldCardNumber// 旧业务号码
            obj.oldCardIccid = item.oldCardIccid// 旧Iccid
            obj.newCardId = item.newCardId
            obj.newCardNumber = item.newCardNumber // 新业务号码
            obj.newCardIccid = item.newCardIccid // 新Iccid
            obj.insertEmpId = item.insertEmpId
            obj.insertEmpName = item.insertEmpName//换卡操作人
            obj.updateEmpId = item.updateEmpId
            obj.updateEmpName = item.updateEmpName
            obj.updateTime = item.updateTime // 最终完成时间
            obj.updateTimeDate = item.updateTimeDate // 最终完成时间
            obj.insertTime = item.insertTimeDate // 操作时间
            obj.dictChangeTypeName = item.dictChangeTypeName // 换卡类型
            obj.dictChangeStatusName = item.dictChangeStatusName // 换卡状态
            obj.dictChangeType = item.dictChangeType // 换卡类型
            obj.dictChangeStatus = item.dictChangeStatus // 换卡状态
            obj.shippingAddress = item.shippingAddress
            obj.customerMobile = item.customerMobile
            obj.customerName = item.customerName
            obj.courierNumber = item.courierNumber
            obj.remark = item.remark
            this.tableData.push(obj)
          })

        }
        this.tableLoading = false
      },
      //发货
      async sendCard() {
        const returnData = await sendCard({
          id: this.id,
          courierNumber: this.ruleForm.courierNumber
        }, {pagekey: this.pagekey})
        if (returnData._result) {
          this.changeCardDialog = false
          this.showSendGoods = false
          this.changeCard()
        }
      },

      async changeCardDialogbl(formName) {
        this.pagekey = await this.$getPageKey();
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.changeCardDialog = true;

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      async stopCardBtn(formName) {
        this.pagekey = await this.$getPageKey();
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.terminatedDialog = true;

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      stopCardBtn1(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.terminatedDialog1 = true
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      showSendGoodsBtn(card) {
        this.id = card.id
        this.ruleForm.shippingAddress = card.shippingAddress
        this.ruleForm.customerMobile = card.customerMobile
        this.ruleForm.customerName = card.customerName
        this.ruleForm.reason = ""
        this.ruleForm.courierNumber = ""
        this.showSendGoods = true
      },
      showterminatedBtn(card) {
        this.id = card.id
        this.oldCardId = card.oldCardId
        this.ruleForm.courierNumber = ""
        this.showStopCard1 = true
      },
      showNumDetailBtn(card) {
        this.ruleForm.customerName = card.customerName
        this.ruleForm.shippingAddress = card.shippingAddress
        this.ruleForm.customerMobile = card.customerMobile
        this.courierNumber1 = card.courierNumber
        this.showNumDetail = true
      },
      async checkChangeCardNumber1(cardNumber) {
        const returnData = await checkChangeCardNumber({
          operatorNumber: cardNumber
        })
        if (returnData._result) {
          if (returnData.data.notFindCard == "true") {
            this.submitFlag1 = false;
            this.changeFlowForm.oldLabel = "找不到卡号!"
            return
          }
          else {
            this.submitFlag1 = true;
            this.changeFlowForm.oldLabel = ""
            return
          }
          let returnStr = returnData.data.dictMayChangeStatus + returnData.data.thirdName
          this.changeFlowForm.oldLabel = returnStr
        }
      },
      async checkChangeCardNumber2(cardNumber) {
        const returnData = await checkChangeCardNumber({
          operatorNumber: cardNumber
        })
        if (returnData._result) {
          if (returnData.data.notFindCard == "true") {
            this.submitFlag2 = false;
            this.changeFlowForm.newLabel = "找不到卡号!"
            return
          }
          else {
            this.submitFlag2 = true;
            this.changeFlowForm.newLabel = ""
            return
          }
          let returnStr = returnData.data.dictMayChangeStatus + returnData.data.thirdName
          this.changeFlowForm.newLabel = returnStr
        }
      },
      async exportExcel() {
        let startTime = null;
        let endTime = null;
        this.tableLoading = true;
        if (this.form.insertTime !== '' && this.form.insertTime != null) {
          startTime = this.form.insertTime[0];
          endTime = this.form.insertTime[1];
        }
        let handleStartTime = null
        let handleEndTime = null
        if (this.form.updateTime !== '' && this.form.updateTime != null) {
          handleStartTime = this.form.updateTime[0];
          handleEndTime = this.form.updateTime[1];
        }

        downloadChangCardList({
          oldCardNumber: this.form.oldCardNumber,
          newCardNumber: this.form.newCardNumber,
          dictChangeStatus: this.form.dictChangeStatus,
          dictChangeType: this.form.dictChangeType,
          customerMobile: this.form.customerMobile,
          customerName: this.form.customerName,
          insertTimeStart: startTime,
          updateTimeStart: handleStartTime,
          updateTimeEnd: handleEndTime,
        })
        this.$confirm('正在查询中，是否立即前往任务中心查看结果?', '提示', {
          confirmButtonText: '前往任务中心',
          cancelButtonText: '留在当前页',
          type: 'warning'
        }).then(() => {
          this.$router.push({
            path: '/mission/mission'
          })
        }).catch(() => {

        });
        // this.tableLoading = true;
        // this.loading = true;
        // let startTime = null;
        // let endTime = null;
        // if (this.form.insertTime !== '' && this.form.insertTime != null) {
        //   startTime = this.form.insertTime[0];
        //   endTime = this.form.insertTime[1];
        // }
        // let handleStartTime = null
        // let handleEndTime = null
        // if (this.form.updateTime !== '' && this.form.updateTime != null) {
        //   handleStartTime = this.form.updateTime[0];
        //   handleEndTime = this.form.updateTime[1];
        // }
        // let obj = {
        //   oldCardNumber: this.form.oldCardNumber,
        //   newCardNumber: this.form.newCardNumber,
        //   dictChangeStatus: this.form.dictChangeStatus,
        //   dictChangeType: this.form.dictChangeType,
        //   customerMobile: this.form.customerMobile,
        //   customerName: this.form.customerName,
        //   insertTimeStart: startTime,
        //   updateTimeStart: handleStartTime,
        //   updateTimeEnd: handleEndTime,
        //   page: {
        //     current: '1',
        //     size: this.totalPage + '',
        //     ascs: this.ascs,
        //     descs: this.descs
        //   }
        // }
        //
        // let list = [];
        // let filterVal = [];
        // let arr = new Array(...this.$refs.table.columns);
        // arr.shift();
        // for (let item of arr) {
        //   list.push(item.label);
        //   filterVal.push(item.property);
        // }
        // list.pop();
        // filterVal.pop();
        // this.tableLoading = false;
        // this.loading = false;
        // let info = {
        //   api: 'changeCard',
        //   name: '换卡记录列表'
        // };
        // const {href} = this.$router.resolve({
        //   path: '/exl/exlDownload',
        //   query: {
        //     list: JSON.stringify(list),
        //     filterVal: JSON.stringify(filterVal),
        //     obj: JSON.stringify(obj),
        //     info: JSON.stringify(info),
        //   }
        // });
        // window.open(href, '_blank');

      },
    },


  }
</script>

<style scoped lang="scss">
  .el-container {
    .el-header {
      margin-top: 3vh;

      .box /deep/ label {
        text-align: left;
      }

      .line {
        text-align: center;
      }

      .el-form-item {
        margin-bottom: 10px;
      }

      .export {
        margin-bottom: 0px;
      }

      .export /deep/ button {
        margin-right: 10px;
      }
    }

    .el-main {
      .el-form-item {
        margin-bottom: 10px;
      }

      .el-dropdown-link {
        font-size: 20px;
        cursor: pointer;
      }

      .block {
        float: right;
        position: relative;
        top: 10px;
      }

      .data {
        text-align: center;

        .echo {
          color: red;
        }
      }

      .data /deep/ span {
        text-align: center;
        font-size: 14px;
        font-family: 微软雅黑;
        line-height: 40px;
        color: #606266;
        font-weight: 700;
      }

      .data /deep/ a {
        text-align: center;
        font-size: 14px;
        font-family: 微软雅黑;
        line-height: 40px;
        font-weight: 700;
      }

      .data {
        position: relative;
        top: -32px;

        .el-col {
          display: flex;
          justify-content: space-between;

          span {
            display: inline-block;
            text-align: center;
          }
        }
      }
    }
  }

  .el-popper[x-placement^=bottom] {
    margin-right: -31px;
    box-shadow: 0px 0px 10px #888888;
    margin-left: 6px;

    .operation {
      border: 0;
      outline: none;
      display: block;
      text-align: center;
      margin: 0;
    }
  }

  .el-popper[x-placement^=top] {
    box-shadow: 0px 0px 10px #888888;
    margin-left: 6px;
    margin-right: -31px;

    button {
      display: block;
    }

    .operation {
      border: 0;
      outline: none;
      display: block;
      text-align: center;
      margin: 0;
    }
  }
  .hiddenText{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>
